
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skin.css" />

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});

</script>
</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Carousel with autoscrolling</h2>

  <p>
    Autoscrolling is enabled and the interval is set to <code>2</code> seconds.
    Autoscrolling pauses when the user moves the cursor over the images and stops
    when the user clicks the next or prev button.
  </p>

  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
	<li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
	<li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
	<li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
	<li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
    <li><img src="http://lorempixum.com/200/200/food" width="100" height="100" alt="" /></li>
  </ul>

</div>
</body>
</html>